@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

/* 自定义动画 */
@keyframes sparkle {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

.sparkle {
  animation: sparkle 2s ease-in-out infinite;
}

/* 科技感效果 */
.tech-border {
  position: relative;
  background: linear-gradient(45deg, #1e3a8a, #3b82f6, #8b5cf6, #ec4899);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.tech-border::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: inherit;
  z-index: -1;
}

/* 按钮悬停效果 */
.glow-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glow-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.glow-button:hover::before {
  width: 300px;
  height: 300px;
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
  transform: translateY(-2px);
}

/* 二次元风格卡片 */
.anime-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.anime-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
}

/* 鼓励师头像选择效果 */
.mentor-avatar {
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.mentor-avatar:hover {
  transform: scale(1.1) rotate(5deg);
}

.mentor-avatar.selected {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
}

.mentor-avatar.selected::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  animation: sparkle 1s ease-in-out infinite;
}

/* 文字动画 */
.pop-text {
  animation: popIn 0.5s ease-out;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* 滚动反馈样式 */
.feedback-scroll {
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.feedback-scroll:hover {
  animation-play-state: paused;
}